<!DOCTYPE html>
<!-- saved from url=(0051)http://getbootstrap.com/examples/navbar-static-top/ -->
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>Static Top Navbar Example for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./css/site.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="./js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="./js/html5shiv.min.js"></script>
      <script src="./js/respond.min.js"></script>
    <![endif]-->
	<style>
		@font-face {
			font-family: "Intel Clear";
			src: url("fonts/IntelClear_Rg.ttf");
		}
		@font-face {
			font-family: "Intel Clear";
			src: url("fonts/IntelClear_LtIt.ttf");
			font-weight: lighter;
			font-style: italic;
		}
		@font-face {
			font-family: "Intel Clear";
			src: url("fonts/IntelClear_Bd.ttf");
			font-weight: bold;
		}
		@font-face {
			font-family: "Intel Clear";
			src: url("fonts/IntelClear_BdIt.ttf");
			font-weight: bold;
			font-style: italic;
		}
		@font-face {
			font-family: "Intel Clear";
			src: url("fonts/IntelClear_It.ttf");
			font-style: italic;
		}
		@font-face {
			font-family: "Intel Clear";
			src: url("fonts/IntelClear_Lt.ttf");
			font-weight: lighter;
		}

		body {
			font-family: "Intel Clear";
		}
		
		@media (max-width: 767px) {
			.intel-ss-5slots-full {
				display: none;
			}
			.intel-ss-5slots-slide {
				display: block;
			}
		}
		@media (min-width: 768px) {
			.intel-ss-5slots-full {
				display: block;
			}
			.intel-ss-5slots-slide {
				display: none;
			}
		}
		
		.intel-ss-slot-tinybar {
			position: absolute; 
			top: 0px; 
			left: 0px; 
			width:100%; 
			height: 5%; 
			background-color: red;
		}
		
		.intel-ss-slot-content {
			position: absolute; 
			bottom: 0px; 
			left: 0px; 
			width:100%; 
			height: 95%; 
			background-color: green;
		}
		
		.intel-ss-slot-panel {
			position: absolute; 
			bottom: 0px; 
			left: 0px; 
			width:65%; 
			height: 30%; 
			background-color: green;
		}
		
		.intel-ss-slot-container {
			position: relative; 
			overflow: hidden;
		}
	</style>

  </head>

  <body>

	
    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-fixed-top " role="navigation">
      <div class="container-fluid intel-background-color">
		<div class="row intel-row-margin">
			<div class="navbar-header">
			  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a href="/" ><img src="./images/logo.png" class="intel-logo-image" /></a>
			</div>
			<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
			  <ul class="nav navbar-nav navbar-right">
				<li><a href="http://getbootstrap.com/examples/navbar/">SYNCS & SUMMITS</a></li>
				<li><a href="http://getbootstrap.com/examples/navbar/">DEVELOPMENT</a></li>
				<li><a href="http://getbootstrap.com/examples/navbar/">PROGRESSION</a></li>
				<li><a href="./Static Top Navbar Example for Bootstrap_files/Static Top Navbar Example for Bootstrap.html">NETWORKING</a></li>
				<li><a href="http://getbootstrap.com/examples/navbar-fixed-top/">VIP SERVICES</a></li>
			  </ul>
			</div><!--/.nav-collapse -->

		</div>
      </div>
    </nav>

	<!--5 slot full-->
    <div class="container-fluid intel-ss-5slots-full">
      <div class="row intel-ss-row-slots">
		<!--5 slots-->
		<div class="col-sm-6 intel-ss-slot-container intel-ss-slot1" >
			<!--Slot 1-->
			<img class="intel-ss-image-slot1" src="./Images/Slot1.png" alt="Image" style="width: 100%" />
			
			<div class="intel-ss-slot-panel" >
				<!--Tiny bar-->
				<div class="intel-ss-slot-tinybar" >
				</div>
				<!--Content-->
				<div class="intel-ss-slot-content" >
					This is description
				</div>
			</div>
		</div>
		<div class="col-sm-6 intel-ss-slot2345">
			<table>
				<tr>
					<td>
						<!--Slot 2-->
						<div class="intel-ss-slot-container">
							<img class="intel-ss-image-slot2" src="./Images/Slot2.png" alt="Image" style="width: 100%" />
							
							<div class="intel-ss-slot-panel" >
								<!--Tiny bar-->
								<div class="intel-ss-slot-tinybar">
								</div>
								<!--Content-->
								<div class="intel-ss-slot-content">
									This is description
								</div>
							</div>
						</div>

					</td>
					<td>
						<!--Slot 3-->
						<div class="intel-ss-slot-container">
							<img class="intel-ss-image-slot3" src="./Images/Slot3.png" alt="Image" style="width: 100%" />
							
							<div class="intel-ss-slot-panel">
								<!--Tiny bar-->
								<div class="intel-ss-slot-tinybar">
								</div>
								<!--Content-->
								<div class="intel-ss-slot-content">
									This is description
								</div>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<!--Slot 4-->
						<div class="intel-ss-slot-container">
							<img class="intel-ss-image-slot4" src="./Images/Slot4.png" alt="Image" style="width: 100%" />
							
							<div class="intel-ss-slot-panel">
								<!--Tiny bar-->
								<div class="intel-ss-slot-tinybar">
								</div>
								<!--Content-->
								<div class="intel-ss-slot-content">
									This is description
								</div>
							</div>
						</div>

					</td>
					<td>
						<!--Slot 5-->
						<div class="intel-ss-slot-container">
							<img class="intel-ss-image-slot5" src="./Images/Slot5.png" alt="Image" style="width: 100%" />
							
							<div class="intel-ss-slot-panel">
								<!--Tiny bar-->
								<div class="intel-ss-slot-tinybar">
								</div>
								<!--Content-->
								<div class="intel-ss-slot-content">
									This is description
								</div>
							</div>
						</div>
					</td>
				</tr>
			</table>
		</div>

		<div class="col-sm-6">
		</div>
      </div>

    </div> <!-- /container -->

	<!--5 slots slide-->
    <div class="container-fluid intel-ss-5slots-slide">
		<div class="row">
			<div class="col-md-12">
				<!-- Jssor Slider Begin -->
				<!-- You can move inline styles to css file or css block. -->
				<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px;
					height: 526px; overflow: hidden;">
					<!-- Slides Container -->
					<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 800px; height: 526px;
						overflow: hidden;">
						<!--Slot 1-->
						<div class="intel-ss-slot-container">
							<img class="intel-ss-slot1-mobile" src="./Images/Slot1.png" alt="Image" style="width: 100%" />
							
							<div class="intel-ss-slot-panel">
								<!--Tiny bar-->
								<div class="intel-ss-slot-tinybar">
								</div>
								<!--Content-->
								<div class="intel-ss-slot-content">
									This is description
								</div>
							</div>

						</div>
						<div>
							<!--Slot 2345-->
							<table>
								<tr>
									<td>
										<!--Slot 2-->
										<div class="intel-ss-slot-container">
											<img class="intel-ss-slot2-mobile" src="./Images/Slot2.png" alt="Image" style="width: 100%" />
											
											<div class="intel-ss-slot-panel">
												<!--Tiny bar-->
												<div class="intel-ss-slot-tinybar">
												</div>
												<!--Content-->
												<div class="intel-ss-slot-content">
													This is description
												</div>
											</div>
										</div>

									</td>
									<td>
										<!--Slot 3-->
										<div class="intel-ss-slot-container">
											<img class="intel-ss-slot3-mobile" src="./Images/Slot3.png" alt="Image" style="width: 100%" />
											
											<div class="intel-ss-slot-panel">
												<!--Tiny bar-->
												<div class="intel-ss-slot-tinybar">
												</div>
												<!--Content-->
												<div class="intel-ss-slot-content">
													This is description
												</div>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<!--Slot 4-->
										<div class="intel-ss-slot-container">
											<img class="intel-ss-slot4-mobile" src="./Images/Slot4.png" alt="Image" style="width: 100%" />
											
											<div class="intel-ss-slot-panel">
												<!--Tiny bar-->
												<div class="intel-ss-slot-tinybar">
												</div>
												<!--Content-->
												<div class="intel-ss-slot-content">
													This is description
												</div>
											</div>
										</div>

									</td>
									<td>
										<!--Slot 5-->
										<div class="intel-ss-slot-container">
											<img class="intel-ss-slot5-mobile" src="./Images/Slot5.png" alt="Image" style="width: 100%" />
											
											<div class="intel-ss-slot-panel">
												<!--Tiny bar-->
												<div class="intel-ss-slot-tinybar">
												</div>
												<!--Content-->
												<div class="intel-ss-slot-content">
													This is description
												</div>
											</div>
										</div>
									</td>
								</tr>
							</table>

						</div>
						<!--Slot 1-->
						<div class="intel-ss-slot-container">
							<img class="intel-ss-slot1-mobile-2" src="./Images/Slot1.png" alt="Image" style="width: 100%" />
							
							<div class="intel-ss-slot-panel">
								<!--Tiny bar-->
								<div class="intel-ss-slot-tinybar">
								</div>
								<!--Content-->
								<div class="intel-ss-slot-content">
									This is description
								</div>
							</div>

						</div>
						<div>
							<!--Slot 2345-->
							<table>
								<tr>
									<td>
										<!--Slot 2-->
										<div class="intel-ss-slot-container">
											<img class="intel-ss-slot2-mobile-2" src="./Images/Slot2.png" alt="Image" style="width: 100%" />
											
											<div class="intel-ss-slot-panel">
												<!--Tiny bar-->
												<div class="intel-ss-slot-tinybar">
												</div>
												<!--Content-->
												<div class="intel-ss-slot-content">
													This is description
												</div>
											</div>
										</div>

									</td>
									<td>
										<!--Slot 3-->
										<div class="intel-ss-slot-container">
											<img class="intel-ss-slot3-mobile-2" src="./Images/Slot3.png" alt="Image" style="width: 100%" />
											
											<div class="intel-ss-slot-panel">
												<!--Tiny bar-->
												<div class="intel-ss-slot-tinybar">
												</div>
												<!--Content-->
												<div class="intel-ss-slot-content">
													This is description
												</div>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<!--Slot 4-->
										<div class="intel-ss-slot-container">
											<img class="intel-ss-slot4-mobile-2" src="./Images/Slot4.png" alt="Image" style="width: 100%" />
											
											<div class="intel-ss-slot-panel">
												<!--Tiny bar-->
												<div class="intel-ss-slot-tinybar">
												</div>
												<!--Content-->
												<div class="intel-ss-slot-content">
													This is description
												</div>
											</div>
										</div>

									</td>
									<td>
										<!--Slot 5-->
										<div class="intel-ss-slot-container">
											<img class="intel-ss-slot5-mobile-2" src="./Images/Slot5.png" alt="Image" style="width: 100%" />
											
											<div class="intel-ss-slot-panel">
												<!--Tiny bar-->
												<div class="intel-ss-slot-tinybar">
												</div>
												<!--Content-->
												<div class="intel-ss-slot-content">
													This is description
												</div>
											</div>
										</div>
									</td>
								</tr>
							</table>

						</div>
					</div>

					<!-- Arrow Navigator Skin Begin -->
					<style>
						/* jssor slider arrow navigator skin 13 css */
						/*
						.jssora13l              (normal)
						.jssora13r              (normal)
						.jssora13l:hover        (normal mouseover)
						.jssora13r:hover        (normal mouseover)
						.jssora13ldn            (mousedown)
						.jssora13rdn            (mousedown)
						*/
						.jssora13l, .jssora13r, .jssora13ldn, .jssora13rdn {
							position: absolute;
							cursor: pointer;
							display: block;
							background: url(./images/a13.png) no-repeat;
							overflow: hidden;
						}

						.jssora13l {
							background-position: -10px -35px;
						}

						.jssora13r {
							background-position: -70px -35px;
						}

						.jssora13l:hover {
							background-position: -130px -35px;
						}

						.jssora13r:hover {
							background-position: -190px -35px;
						}

						.jssora13ldn {
							background-position: -250px -35px;
						}

						.jssora13rdn {
							background-position: -310px -35px;
						}
					</style>
					<!-- Arrow Left -->
					<span u="arrowleft" class="jssora13l" style="width: 40px; height: 50px; top: 123px; left: 30px;">
					</span>
					<!-- Arrow Right -->
					<span u="arrowright" class="jssora13r" style="width: 40px; height: 50px; top: 123px; right: 30px">
					</span>
					<!-- Arrow Navigator Skin End -->
				</div>
				<!-- Jssor Slider End -->

			</div>
		</div>
	

    </div> <!-- /container -->

    <!--Footer-->
	<div class="container-fluid intel-container-footer" >
        <div class="row intel-footer intel-row-margin">
            <div class="col-xs-8 text-left intel-text-color-footer">
                © 2014 Intel Executive Forum, All Rights Reserved.
            </div>
            <div class="col-xs-4 text-right">
                <a href="/" class="intel-text-color-footer" style="padding-right: 30px;">Contact</a>
				<a href="/" class="intel-text-color-footer">About</a>
            </div>
        </div>
	</div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jssor.js"></script>
    <script type="text/javascript" src="./js/jssor.slider.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="./js/ie10-viewport-bug-workaround.js"></script>
	
	<script>
	
		function setSlotHeight()
		{
			var slot1Width = $('.intel-ss-slot1').width();
			var slot1Height = Math.floor((slot1Width * 3) / 4);
			$('.intel-ss-image-slot1').css({'height':slot1Height+'px'});
			var slot2Height = Math.floor(slot1Height / 2);
			var slot3Height = slot2Height;
			var slot4Height = slot1Height - slot2Height;
			var slot5Height = slot4Height;
			
			var slot2345Width = $('.intel-ss-slot2345').width();
			var slot2Width = Math.floor(slot2345Width / 2);
			var slot3Width = slot2345Width - slot2Width;
			var slot4Width = slot2Width;
			var slot5Width = slot3Width;
			
			$('.intel-ss-image-slot2').css({'height':slot2Height+'px'});
			$('.intel-ss-image-slot3').css({'height':slot3Height+'px'});
			$('.intel-ss-image-slot4').css({'height':slot4Height+'px'});
			$('.intel-ss-image-slot5').css({'height':slot5Height+'px'});

			$('.intel-ss-image-slot2').css({'width':slot2Width+'px'});
			$('.intel-ss-image-slot3').css({'width':slot3Width+'px'});
			$('.intel-ss-image-slot4').css({'width':slot4Width+'px'});
			$('.intel-ss-image-slot5').css({'width':slot5Width+'px'});

		}
		
		function setSlotHeightMobile()
		{
			var slot1Width = 700;
			var slot1Height = 526;
			$('.intel-ss-slot1-mobile').css({'height':slot1Height+'px'});
			$('.intel-ss-slot1-mobile-2').css({'height':slot1Height+'px'});

			var slot2Width = Math.floor(slot1Width/2);
			var slot2Height = Math.floor(slot1Height/2);
			$('.intel-ss-slot2-mobile').css({'width':slot2Width+'px'});
			$('.intel-ss-slot2-mobile').css({'height':slot2Height+'px'});
			$('.intel-ss-slot2-mobile-2').css({'width':slot2Width+'px'});
			$('.intel-ss-slot2-mobile-2').css({'height':slot2Height+'px'});

			$('.intel-ss-slot3-mobile').css({'width':slot2Width+'px'});
			$('.intel-ss-slot3-mobile').css({'height':slot2Height+'px'});
			$('.intel-ss-slot3-mobile-2').css({'width':slot2Width+'px'});
			$('.intel-ss-slot3-mobile-2').css({'height':slot2Height+'px'});

			$('.intel-ss-slot4-mobile').css({'width':slot2Width+'px'});
			$('.intel-ss-slot4-mobile').css({'height':slot2Height+'px'});
			$('.intel-ss-slot4-mobile-2').css({'width':slot2Width+'px'});
			$('.intel-ss-slot4-mobile-2').css({'height':slot2Height+'px'});

			$('.intel-ss-slot5-mobile').css({'width':slot2Width+'px'});
			$('.intel-ss-slot5-mobile').css({'height':slot2Height+'px'});
			$('.intel-ss-slot5-mobile-2').css({'width':slot2Width+'px'});
			$('.intel-ss-slot5-mobile-2').css({'height':slot2Height+'px'});

		}

		$(function(){
			//jssor code
            var options = {
                $AutoPlay: false,

                $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false

                $ArrowKeyNavigation: true,   			            //Allows arrow key to navigate or not
                $SlideWidth: 700,                                   //[Optional] Width of every slide in pixels, the default is width of 'slides' container
                $SlideHeight: 526,                                  //[Optional] Height of every slide in pixels, the default is width of 'slides' container
                $SlideSpacing: 0, 					                //Space between each slide in pixels
                $DisplayPieces: 2,                                  //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                $ParkingPosition: 0,                                //The offset position to park slide (this options applys only when slideshow disabled).

                $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                }
            };

            var jssor_slider1 = new $JssorSlider$("slider1_container", options);

            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizes
            function ScaleSlider() {
                var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
                if (parentWidth)
                    jssor_slider1.$ScaleWidth(Math.min(parentWidth, 800));
                else
                    window.setTimeout(ScaleSlider, 30);
            }
            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
			//end of jssor code

			setSlotHeight();
			setSlotHeightMobile();
			$( window ).resize(function() {
				setSlotHeight();
				setSlotHeightMobile();
			});
			//setTimeout(setSlotHeight, 1);
		});

		
	</script>
  
</body></html>